<template>
	<view class="container">
		<!--计划内容-->
		<view class="planContent">
			<!--计划名字-->
			<view class="planName">
				<view><input placeholder="请输入计划名"/></view>

			</view>
			<!--计划完成日期-->
			<view class="planTime">
				<text>计划完成日期</text>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<!--计划内容-->
			<view class="planContentList">
				<view>
					<view>每天做题<text>(个)</text></view>
					<view>完成天数<text>(天)</text></view>
				</view>
				<view class="uni-picker">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					    <picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					    </picker-view-column>
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
					    </picker-view-column>
					</picker-view>
					<!-- <view>
						<checkbox-group>
							<label>
								<checkbox value="cb" color="#E8815E" style="transform:scale(0.7)"/>
							</label>
						</checkbox-group>
					</view> -->
				</view>
			</view>
			<!--继续学习按钮-->
			<view>
				<button class="btn" click="addPlan">添加计划</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad:function(option){
			console.log(option.id);
			console.log(option.name);
		},
		data() {
			 const currentDate = this.getDate({
			            format: true
			        });
			 const date = new Date()
			  // const years = []
			  const years = ['10','20','30','40','50','60'];
			  const year = date.getFullYear()
			  // const months = []
			  const months = ['36','30','24','18','12','6','5','4','3','2','1'];
			  const month = date.getMonth() + 1
			   
			 // 
			 // 
			return {
				 title: 'picker',
				 date: currentDate,
				  title: 'picker-view',
				  years,
				  months,
			      value: [year, month -1],
				  visible:true,
				  indicatorStyle: `height: 50px;`,
				  
			};
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
		methods: {
			 bindChange: function (e) {
			                const val = e.detail.value
			                this.year = this.years[val[0]]
			                this.month = this.months[val[1]]
			            },
			  bindDateChange: function(e) {
			            this.date = e.detail.value
			        },
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
				 year = year;
				} else if (type === 'end') {
				year = year + 3;
              }
			 month = month > 9 ? month : '0' + month;
			 day = day > 9 ? day : '0' + day;
			 return `${year}-${month}-${day}`;
			}
			
		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	width: 750rpx;
	height: 1150rpx;
	border-top: 0.05rpx solid #90A674;
	background-color: rgb(246 245 245);
}

.planContent{
	ddisplay: flex;
	flex-direction: column;
	width: 90%;
	height: 800rpx;
	margin-left: 40rpx;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 0 2rpx #90A674;  /*添加阴影效果 */
}
.planName{
	display: flex;
	flex-direction: row;
	height: 100rpx;
	justify-content: space-between;
	/*box-shadow: 0 0 1rpx #90A674;  添加阴影效果 */
}
.planName>view:nth-child(1) input{
	width: 400rpx;
	height: 30rpx;
	margin-top: 20rpx;
	font-weight: bold;
	box-shadow: 0 0 3rpx #90A674; /* 添加阴影效果 */
}

.planTime{
	display: flex;
	height: 60rpx;
	
}
.planTime>text{
	display: flex;
	width: 220rpx;
	margin-right: 1rpx;
	color: #8f8f8f;
}
.uni-input{
	color: #E8815E;
}
.planContentList{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 500rpx;
/* 	box-shadow: 0 0 3rpx #90A674; /* 添加阴影效果 */ 
	
}
.planContentList>view:nth-child(1){
	width: 100%;
	height: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-left: 30rpx;
}
.planContentList>view:nth-child(1)>view{
	display: flex;
	width: 250rpx;
	justify-content: center;
	/*box-shadow: 0 0 3rpx #90A674;  添加阴影效果 */
}
.planContentList>view:nth-child(1)>view text{
	color: #8f8f8f;
}
.planContentList>view:nth-child(1)>view:nth-child(2){
	margin-right: 100rpx;
}
.uni-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 30rpx;
  width: 700rpx;
  height: 100vh;
}
.picker-view {
		width: 600rpx;
		height: 420rpx;
		margin-top: 10rpx;
}
.item {
	line-height: 100rpx;
	text-align: center;
	margin-left: 30rpx;
	}

.btn{
		display: flex;
		width: 350rpx;
		height: 80rpx;
		margin-top: 50rpx;
		border-radius: 80rpx;
		align-items: center;
		justify-content: center;
		color: white;
		background-color: #90A674;;
	}
</style>
